<template>
	<virtual-list
		class="List"
		:height="800"
		:item-data="list"
		:item-count="dataLen"
		:item-size="itemHeight"
		:item="Row"
		width="100%"
		@scroll="onScroll"
	/>
</template>

<script>
import { markRaw } from 'vue';
import Row from './row.vue';

function buildData(offset = 0) {
	return Array(100)
		.fill(0)
		.map((_, i) => i + offset);
}
export default {
	data() {
		return {
			Row: markRaw(Row),
			list: buildData(0),
			loading: false,
			itemHeight: 100,
		};
	},
	computed: {
		dataLen() {
			return this.list.length;
		},
	},
	methods: {
		listReachBottom() {
			Taro.showLoading();
			this.loading = true;
			setTimeout(() => {
				const { data } = this.state;
				this.setState(
					{
						data: data.concat(buildData(data.length)),
					},
					() => {
						this.loading = false;
						Taro.hideLoading();
					}
				);
			}, 1000);
		},
		onScroll({ scrollDirection, scrollOffset }) {
			if (
				// 避免重复加载数据
				!this.loading &&
				// 只有往前滚动我们才触发
				scrollDirection === 'forward'
			) {
				this.listReachBottom();
			}
		},
	},
};
</script>
